<template>
  <!--#ifndef MP-->
  <view
      class="floating-container"
      :style="floatingStyle"
      @touchstart="startDrag"
      @touchmove="onDrag"
      @touchend="stopDrag"
  >
    <view class="icon" @tap="goBack">
      <uv-icon :color="iconColor"
               :size="size"
               :name="icon"
      ></uv-icon>
    </view>
  </view>
  <!--  #endif-->

  <!-- #ifdef MP-->
  <view
      class="floating-container"
      :style="{
          right: position.right,
          bottom: position.bottom
      }"
  >
    <view class="icon" @tap="goBack">
      <uv-icon :color="iconColor"
               :size="size"
               :name="icon"
      ></uv-icon>
    </view>
  </view>
  <!--  #endif-->
</template>

<script>
export default {
  props: {
    jumpath: {type: String, default: null},
    position: {
      type: Object,
      default: () => ({right: '20px', bottom: '50px'})
    },
    size: {
      type: Number,
      default: 25
    },
    icon: {
      type: String,
      default: 'share-square'
    },
    background: {
      type: String,
      default: 'none'
    },
    boxShadow: {
      type: String,
      default: '0 4px 6px rgba(0, 0, 0, 0.1)'
    },
    iconColor: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      isDragging: false,
      x: 0,
      y: 0,
      startX: 0,
      startY: 0
    };
  },
  computed: {
    floatingStyle() {
      let H5 = {
        right: this.x + 'px',
        bottom: this.y + 'px',
        background: this.background,
        boxShadow: this.boxShadow
      };
      return H5;
    }
  },

  methods: {
    goBack() {
      if (this.jumpath) {
        uni.navigateTo({url: this.jumpath});
      } else {
        this.$emit("clickBtn", {});
      }
    },
    startDrag(event) {
      this.isDragging = true;
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
      event.preventDefault(); // 阻止滚动
      event.stopPropagation(); // 防止事件冒泡
    },
    onDrag(event) {
      if (!this.isDragging) {
        return;
      }
      const dx = event.touches[0].clientX - this.startX;
      const dy = event.touches[0].clientY - this.startY;
      this.x -= dx;
      this.y -= dy;
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
      event.preventDefault(); // 阻止滚动
      event.stopPropagation(); // 防止事件冒泡
    },
    stopDrag() {
      this.isDragging = false;
    }
  },
  created() {
    this.x = parseInt(this.position.right);
    this.y = parseInt(this.position.bottom);
  }
};
</script>

<style scoped>
.floating-container {
  z-index: 100000;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background: white;
  border-radius: 20px;
  padding: 10rpx;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: grab;
  user-select: none;
  touch-action: none; /* 禁止触摸滑动 */
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.icon:hover {
  background: #ddd;
}
</style>
